/**
 * #info
 *
 *@author   wuwg
 *@createTime   2018/03/20
 *@updateTime   2018/04/25
 *@description  option-group  component 下拉参数组组件
 */

/**
 * #item
 *
 * @type        aty-option-group
 * @cn          下拉分组
 * @stPlugin    false
 * @stContainer false
 * @parents     [aty-select]
 * @children    [aty-option]
 */
/**
 * #extendproperty
 *
 * @name    slot
 * @cn      slot插槽
 * @options [default]
 * @type    list
 * @description  default插槽
 */
import config from '../../../../config/config.js'

// components
import atyOption from '../option/index.vue'
// prefix
const prefixCls = config.prefix + '-select-group'
// module
export default {
  name: config.prefix + '-option-group',
  components: {
    atyOption
  },
  props: {
    /**
     * #property
     *
     * @name    data
     * @cn      数据列表
     * @group   数据
     * @type    array
     * @bind    bind
     * @required true
     * @description  当前的数据列表
     */
    data: {
      type: Array,
      required: true,
      default () {
        return []
      }
    },
    /**
     * #property
     *
     * @name    showTitle
     * @cn      是否显示title
     * @group   控制
     * @type    boolean
     * @value   false
     * @description 鼠标滑过是否显示title
     */
    showTitle: {
      type: Boolean,
      default: false
    },
    /**
     * #property
     *
     * @name    showInvalid
     * @cn      显示无效节点
     * @group   控制
     * @type    boolean
     * @value   false
     * @description 设置为true后, 无效的代码值会以disable的形式展现
     */
    showInvalid: {
      type: Boolean,
      default: false
    },
    /**
     * #property
     *
     * @name    htmlHighLight
     * @cn      显示html高亮，用于v-html渲染
     * @group   控制
     * @type    boolean
     * @value   true
     * @bind    must
     * @description 设置为false后, 不会采用v-html渲染，会减少一层dom
     */
    htmlHighLight: {
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      currentData: this.data,
      prefixCls: prefixCls,
      hidden: false // for search
    }
  },
  watch: {
    data: {
      deep: true,
      handler(newValue, oldValue) {
        this.currentData = newValue
      }
    }
  },
  computed: {
    // 更新当前的options
    currentGroupData: function () {
      const _options = {}
      // options 传进来时是引用类型，所以一定要将其转化成基本类型
      JSON.parse(JSON.stringify(this.currentData)).forEach((item, index) => {
        if (item.groupName) {
          if (_options[item.groupName]) {
            _options[item.groupName].children.push(item)
          } else {
            _options[item.groupName] = {
              name: item.groupName,
              children: [item]
            }
          }
        } else {
          if (_options.other) {
            _options.other.children.push(item)
          } else {
            _options.other = {
              name: '其他',
              children: [item]
            }
          }
        }
      })
      //  赋值
      return Object.values(_options)
    }
  },
  methods: {
    queryChange() {
      this.$nextTick(() => {
        const options = this.$el.querySelectorAll('.' + config.prefix + '-select-item')
        let hasVisibleOption = false
        for (let i = 0; i < options.length; i++) {
          if (options[i].style.display !== 'none') {
            hasVisibleOption = true
            break
          }
        }
        this.hidden = !hasVisibleOption
      })
    }
  },
  mounted() {
    this.$on('query-change', () => {
      this.queryChange()
      return true
    })
  }
}
